<template>
  <div class="index-container">
    <div class="home-header">
      <div class="home-left">
        <img src="../../assets/home/time-icon.png" >
        <span>{{ currentTime }}</span>
      </div>
      <div class="home-right">
        <div class="home-right-item" @click="handleMap">
          <img src="../../assets/home/map-icon.png" alt="">
          <span>养老地图</span>
        </div>
        <div class="home-right-item" @click="handleOut">
          <img src="../../assets/home/logout-icon.png" >
          <span>注销登录</span>
        </div>
      </div>
    </div>
    <div class="title">
      <i>“七联一动”医养结合AiOT大数据管理系统</i>
    </div>
    <div class="home-content">
      <div class="home-content-item" data-path="/medicalCareIndex" @click="handleRouter">
        <img src="../../assets/home/step1.png" alt="">
        <span>医 · 医老人之需</span>
      </div>
      <div class="home-content-item" data-path="/institutionalIndex" @click="handleRouter">
        <img src="../../assets/home/step2.png" alt="">
        <span>养 · 养老人之乐</span>
      </div>
      <div class="home-content-item" data-path="/healthData" @click="handleRouter">
        <img src="../../assets/home/step3.png" alt="">
        <span>康 · 康老人之身</span>
      </div>
      <div class="home-content-item" data-path="/badNum" @click="handleRouter">
        <img src="../../assets/home/step4.png" alt="">
        <span>护 · 护老人之心</span>
      </div>
      <div class="home-content-item" data-path="/entertainment" @click="handleRouter">
        <img src="../../assets/home/step5.png" alt="">
        <span>乐 · 乐老人之快</span>
      </div>
      <div class="home-content-item" data-path="/trainingCourse" @click="handleRouter">
        <img src="../../assets/home/step6.png" alt="">
        <span>学 · 学老人之为</span>
      </div>
      <div class="home-content-item" data-path="/helpManager" @click="handleRouter">
        <img src="../../assets/home/step7.png" alt="">
        <span>助 · 助老人之急</span>
      </div>
      <div class="home-content-item" data-path="/doorService" @click="handleRouter">
        <img src="../../assets/home/step8.png" alt="">
        <span>动 · 流动服务车</span>
      </div>
    </div>
    <div class="home-bottom">
      <p>SAAS大数据管理系统+AiOT人工智能</p>
      <span>{{ instname }}</span>
    </div>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
  import { recordRoute } from "@/config/settings";
  import { mapGetters } from "vuex";
  import { getroleinfo } from "@/api/depart";
  import "swiper/swiper-bundle.css";
  export default {
    name: "CoverIndex",
    components: { Swiper, SwiperSlide },
    directives: {
      swiper: directive,
    },
    data() {
      return {
        currentTime: "",
        swiperOptions: {
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        },
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
      ...mapGetters({
        avatar: "user/avatar",
        username: "user/username",
        instname: "user/instname",
        name: "user/name",
        type: "user/type",
        role_id: 'user/role_id',
        userpermi: "user/userpermi",
        routes: "routes/routes",
      }),
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      setInterval(() => {
        this.timeShow();
      }, 1000);
      if(this.role_id != 0) {
        getroleinfo({id: this.role_id}).then(res => {
          if(res.code == 200) {
            this.$store.dispatch("user/setUserpermi", res.data?.permis.split(",").map(Number))
          } else {
            this.$message({
              message: "权限获取失败，请联系管理员",
                type: "warning",
            })
          }
        })
      }
    },
    methods: {
      timeShow() {
        let d = new Date(),
          str = "";
        str += d.getFullYear() + "-"; //获取当前年份
        str +=
          (d.getMonth() + 1).toString().length < 2
            ? "0" + (d.getMonth() + 1) + "-"
            : d.getMonth() + 1 + "-"; //获取当前月份（0——11）
        str +=
          d.getDate().toString().length < 2
            ? "0" + d.getDate() + " "
            : d.getDate() + " ";
        str +=
          d.getHours().toString().length < 2
            ? "0" + d.getHours() + ":"
            : d.getHours() + ":";
        str +=
          d.getMinutes().toString().length < 2
            ? "0" + d.getMinutes() + ":"
            : d.getMinutes() + ":";
        str +=
          d.getSeconds().toString().length < 2
            ? "0" + d.getSeconds() + ""
            : d.getSeconds() + "";
        this.currentTime = str;
      },
      nav() {
        this.$router.push({ path: "/home" });
      },
      handleNext() {
        this.swiper.slideNext();
      },
      handlePrev() {
        this.swiper.slidePrev();
      },
      handleOut() {
        this.$baseConfirm(
          "您确定要退出" + this.$baseTitle + "吗?",
          null,
          async () => {
            await this.$store.dispatch("user/logout");
            if (recordRoute) {
              const fullPath = this.$route.fullPath;
              this.$router.push(`/login?redirect=${fullPath}`);
            } else {
              this.$router.push("/login");
            }
          }
        );
      },
      handleMap() {
        this.$router.push("/map");
      },
      handleRouter(e) {
        console.log(this.type);
        this.routes.forEach(item => {
          let path = e.currentTarget.dataset.path;
          if(item.id && item.children.length > 0 && item.path == path) {
            this.$router.push(item.children[0].path);
          } else if(item.id && item.path == path && item.children.length == 0) {
            this.$message({
              message: "您没有权限访问，请联系管理员",
              type: "warning",
            });
          }
        })
        // let path = e.currentTarget.dataset.path;
        // this.$router.push(path);
        // if (this.type == 9) {
        //   this.$router.push(path);
        // } else {
        //   if (
        //     path == "/institutionalIndex" ||
        //     path == "/entertainment" ||
        //     path == "/trainingCourse"
        //   ) {
        //     this.$router.push(path);
        //   } else {
        //     this.$message({
        //       message: "您没有权限访问，请联系管理员",
        //       type: "warning",
        //     });
        //   }
        // }
      },
    },
  };
</script>
<style lang="scss" scoped>

  .index-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background: url("../../assets/home/home-bg.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 11%;
    .home-header{
      position: absolute;
      top: 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;
      color: #FFFFFF;
      width: 100%;
      padding: 0 5%;
      box-sizing: border-box;
      .home-left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      img{
        width: 26px;
        height: 27px;
        margin-right: 11px;
      }
      .home-right{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .home-right-item{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          &:nth-child(n+2) {
            margin-left: 35px;
          }
          img{
            width: 25px;
            height: 25px;
            margin-right: 11px;
          }
        }
      }
    }
    @media only screen and (max-width: 767px) {
      .home-header {
        font-size: 13px;
        top: 4%;
        img{
          width: 13px;
          height: auto;
          margin-right: 5px;
        }
        .home-right {
          .home-right-item{
            &:nth-child(n+2) {
              margin-left: 15px;
            }
            img{
              width: 15px;
              height: auto;
              margin-right: 5px;
            }
          }
        }
      }
    }
    .title{
      font-size: 45px;
      font-weight: 600;
      color: #FFFFFF;
      position: absolute;
      top: 12%;
      width: 100%;
      text-align: center;
      letter-spacing: 10px;
    }
    .home-content{
      width: 1232px;
      box-sizing: border-box;
      margin: 0 auto;
      overflow: hidden;
      .home-content-item{
        float: left;
        margin: 12px;
        width: 284px;
        height: 246px;
        border-radius: 15px;
        text-align: center;
        padding-top: 40px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.3s;
        &:hover{
          transform: scale(1.05);
        }
        span{
          display: block;
          font-size: 28px;
          line-height: 28px;
          margin-top: 18px;
          color: #FFFFFF;
        }
        &:nth-child(1) {
          background: linear-gradient(180deg, #57BDFD, #0860D8);
          img{
            width: 104px;
            height: 116px;
          }
        }
        &:nth-child(2) {
          background: linear-gradient(180deg, #C490E9, #3B2FE2);
          img{
            width: 110px;
            height: 117px;
          }
        }
        &:nth-child(3) {
          background: linear-gradient(180deg, #E5957E, #D93D6B);
          img{
            width: 132px;
            height: 119px;
          }
        }
        &:nth-child(4) {
          background: linear-gradient(180deg, #748EF3, #2A21DB);
          img{
            width: 117px;
            height: 117px;
          }
        }
        &:nth-child(5) {
          background: linear-gradient(180deg, #45D7D8, #3731E1);
          img{
            width: 104px;
            height: 116px;
          }
        }
        &:nth-child(6) {
          background: linear-gradient(180deg, #A5FCEC, #02B192);
          img{
            width: 123px;
            height: 118px;
          }
        }
        &:nth-child(7) {
          background: linear-gradient(180deg, #FCF7A5, #EFB400);
          img{
            width: 119px;
            height: 113px;
          }
        }
        &:nth-child(8) {
          background: linear-gradient(180deg, #FCC0A5, #EF7000);
          img{
            width: 110px;
            height: 111px;
          }
        }
      }
    }
    .home-bottom{
      width: 100%;
      position: absolute;
      bottom: 3%;
      text-align: center;
      p{
        font-size: 34px;
        color: #FFFFFF;
        line-height: 34px;
      }
      span{
        display: inline-block;
        font-size: 20px;
        color: #ffffff;
        line-height: 18px;
        margin-top: 24px;
      }
    }
    @media only screen and (max-width: 1600px) {
      .index-container{
        overflow: hidden;
        padding-top: 0;
      }
      .title{
        font-size: 38px;
        margin-top: 6%;
        position: relative;
        top: 0;
      }
      .home-content{
        width: 1000px;
        box-sizing: border-box;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 5%;
        .home-content-item{
          float: left;
          margin: 8px;
          width: 234px;
          height: 170px;
          border-radius: 15px;
          text-align: center;
          padding-top: 30px;
          box-sizing: border-box;
          cursor: pointer;
          transition: all 0.3s;
          &:hover{
            transform: scale(1.05);
          }
          span{
            display: block;
            font-size: 20px;
            line-height: 20px;
            margin-top: 13px;
            color: #FFFFFF;
          }
          &:nth-child(1) {
            background: linear-gradient(180deg, #57BDFD, #0860D8);
            img{
              width: 75px;
              height: 85px;
            }
          }
          &:nth-child(2) {
            background: linear-gradient(180deg, #C490E9, #3B2FE2);
            img{
              width: 80px;
              height: 85px;
            }
          }
          &:nth-child(3) {
            background: linear-gradient(180deg, #E5957E, #D93D6B);
            img{
              width: 96px;
              height: 87px;
            }
          }
          &:nth-child(4) {
            background: linear-gradient(180deg, #748EF3, #2A21DB);
            img{
              width: 85px;
              height: 85px;
            }
          }
          &:nth-child(5) {
            background: linear-gradient(180deg, #45D7D8, #3731E1);
            img{
              width: 75px;
              height: 84px;
            }
          }
          &:nth-child(6) {
            background: linear-gradient(180deg, #A5FCEC, #02B192);
            img{
              width: 90px;
              height: 86px;
            }
          }
          &:nth-child(7) {
            background: linear-gradient(180deg, #FCF7A5, #EFB400);
            img{
              width: 86px;
              height: 82px;
            }
          }
          &:nth-child(8) {
            background: linear-gradient(180deg, #FCC0A5, #EF7000);
            img{
              width: 80px;
              height: 81px;
            }
          }
        }
      }
      .home-bottom{
        width: 100%;
        position: absolute;
        bottom: 3%;
        text-align: center;
        p{
          font-size: 24px;
          color: #FFFFFF;
          line-height: 34px;
        }
        span{
          display: inline-block;
          font-size: 14px;
          color: #ffffff;
          line-height: 14px;
          margin-top: 15px;
        }
      }
    }
    @media only screen and (max-width: 767px) {

      .home-content{
        width: 320px;
        box-sizing: border-box;
        margin: 0 auto;
        overflow: hidden;
        .home-content-item{
          float: left;
          margin: 5px;
          width: 150px;
          height: 108px;
          border-radius: 10px;
          text-align: center;
          padding-top: 15px;
          box-sizing: border-box;
          cursor: pointer;
          transition: all 0.3s;
          &:hover{
            transform: scale(1.05);
          }
          span{
            display: block;
            font-size: 14px;
            line-height: 14px;
            margin-top: 5px;
            color: #FFFFFF;
          }
          &:nth-child(1) {
            background: linear-gradient(180deg, #57BDFD, #0860D8);
            img{
              width: 48px;
              height: 54px;
            }
          }
          &:nth-child(2) {
            background: linear-gradient(180deg, #C490E9, #3B2FE2);
            img{
              width: 44px;
              height: 48px;
            }
          }
          &:nth-child(2) {
            background: linear-gradient(180deg, #C490E9, #3B2FE2);
            img{
              width: 51px;
              height: 54px;
            }
          }
          &:nth-child(3) {
            background: linear-gradient(180deg, #E5957E, #D93D6B);
            img{
              width: 61px;
              height: 55px;
            }
          }
          &:nth-child(4) {
            background: linear-gradient(180deg, #748EF3, #2A21DB);
            img{
              width: 54px;
              height: 54px;
            }
          }
          &:nth-child(5) {
            background: linear-gradient(180deg, #45D7D8, #3731E1);
            img{
              width: 48px;
              height: 54px;
            }
          }
          &:nth-child(6) {
            background: linear-gradient(180deg, #A5FCEC, #02B192);
            img{
              width: 57px;
              height: 55px;
            }
          }
          &:nth-child(7) {
            background: linear-gradient(180deg, #FCF7A5, #EFB400);
            img{
              width: 54px;
              height: 52px;
            }
          }
          &:nth-child(8) {
            background: linear-gradient(180deg, #FCC0A5, #EF7000);
            img{
              width: 51px;
              height: 51px;
            }
          }
        }
      }

      .home-bottom{
        width: 100%;
        position: absolute;
        bottom: 3%;
        text-align: center;
        p{
          font-size: 16px;
          color: #FFFFFF;
          line-height: 16px;
        }
        span{
          display: inline-block;
          font-size: 12px;
          color: #ffffff;
          line-height: 14px;
          margin-top: 10px;
        }
      }
    }

  }
  @media only screen and (max-width: 1600px) {
    .index-container{
      overflow: hidden;
      padding-top: 0;
    }
  }
  @media only screen and (max-width: 767px) {
    .index-container{
      padding-top: 24%;
      .title{
        font-size: 20px;
        top: 9%;
      }
    }
  }


</style>
